<!--问题页面页头-->
<template>
  <el-affix>
    <el-header>
      <el-menu class="menu-wrapper el-menu-demo" mode="horizontal">
        <div class="vertical-wrapper">
          <h2>{{ question }}</h2>
        </div>
        <el-row>
          <div class="vertical-wrapper">
            <el-button type="primary" :icon="EditPen" @click="toAnswer" plain
              >我要回答</el-button
            >
          </div>
          <div class="vertical-wrapper">
            <el-avatar
              :src="
                avatarError
                  ? '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/default?t='+Math.random()
                  : '//images.weserv.nl/?url=150.158.52.191:8080/HeadPortrait/' +
                    userId+'?t='+Math.random()
              "
              @error="avatarError = !avatarError"
            />
          </div>
        </el-row>
      </el-menu>
    </el-header>
  </el-affix>
</template>

<script setup>
import { ref, toRef } from "vue";
import { EditPen } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

const userId = JSON.parse(localStorage.getItem("user")).id,
  router = useRouter();

const props = defineProps({
    question: {
      type: String,
      required: true,
    },
    questionId: {
      type: Number,
      required: true,
    },
  }),
  question = toRef(props, "question"),
  questionId = toRef(props, "questionId"),
  avatarError = ref(false);

const toAnswer = () => {
  let page = router.resolve({
    path: "/editAnswer",
    query: {
      question_id: questionId.value,
      title: question.value
    },
  });
  window.open(page.href, "_blank");
};
</script>

<style scoped>
.menu-wrapper {
  justify-content: space-around;
}
.vertical-wrapper {
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 50px;
}
</style>
